<template>
  <el-dialog
    title="报警处置"
    :visible="visible"
    :width="handleModalWidth * scale + 'px'"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    destroy-on-close
    append-to-body
    @close="closeAction"
  >
    <div class="fl-bw" style="height: 94%;">
      <div class="alarm-info" :style="alarminfo_width">
        <iot-card
          class="today-blk device-blk mb-20 postion"
          title="位置信息"
          :moreType="0"
          :hasAlarmMedia="hasAlarmMedia"
        >
          <Map class="mt-20 p-far" :activeAlarm="activeDevice"></Map>
          <div class="alarmTime">报警时间：{{ activeAlarm.alarmtime }}</div>
        </iot-card>
        <iot-card
          class="today-blk device-blk overflow-auto"
          title="基础信息"
          :moreType="0"
        >
          <el-form
            :label-width="110 * scale + 'px'"
            class="mt-10"
            style="width:100%"
          >
            <el-form-item label="设备名称：">
              <div class="alarm-data">
                {{ activeAlarm.deviceName }}
              </div></el-form-item
            >
            <el-form-item label="报警类型：">
              <div class="alarm-data">
                {{ activeAlarm.alarmTypeName }}
              </div></el-form-item
            >
            <el-form-item label="报警内容：">
              <div class="alarm-data">
                {{ activeAlarm.content }}
              </div></el-form-item
            >
            <template v-if="!activeAlarm.AlarmImg">
              <el-form-item label="报警地址：">
                <div class="alarm-data">
                  {{ activeAlarm.position }}
                </div></el-form-item
              >
              <el-form-item label="所属单位：">
                <div class="alarm-data">
                  {{ activeAlarm.businessName }}
                </div></el-form-item
              >
            </template>

            <el-form-item label="报警图片：" v-else>
              <!-- <img class="alarm-img" :src="activeData.AlarmImg" /> -->
              <el-image
                class="alarm-img"
                :src="activeAlarm.AlarmImg"
                :preview-src-list="[activeAlarm.AlarmImg]"
              >
              </el-image>
            </el-form-item>
          </el-form>
        </iot-card>
      </div>
      <div class="alarm-info" :style="alarminfo_width">
        <iot-card
          class="today-blk device-blk mb-20"
          title="报警日历"
          :stitle="`本月共发生${calendarInfo.count}次报警`"
          :moreType="0"
        >
          <el-calendar class="mt-10" v-model="value">
            <template slot="dateCell" slot-scope="{ date, data }">
              <div v-if="false">{{ date }}</div>
              <div v-if="getalarmDateList(data.day) && alarminfoList">
                <el-popover placement="right" width="340" trigger="click">
                  <h3>今日报警{{ alarminfoList.count }}起</h3>
                  <div
                    v-for="(item, index) in alarminfoList.items"
                    :key="index"
                    class="mb-10 pd-10"
                    style="border-bottom: 1px solid;"
                  >
                    <div class="fw-b">{{ item.alarmTypeName }}</div>
                    <div class="mt-5">报警时间： {{ item.alarmTime }}</div>
                    <div class="mt-5">
                      处置状态：<el-tag
                        size="small"
                        :type="item.isHandle ? 'success' : 'warning'"
                        >{{ item.isHandle ? "已处置" : "未处置" }}</el-tag
                      >
                    </div>
                  </div>
                  <p
                    slot="reference"
                    style="color:red !important;"
                    @click="handleDate(data.day)"
                  >
                    {{ getDate(data.day) }}
                  </p>
                </el-popover>
              </div>

              <p v-else>
                {{ getDate(data.day) }}
              </p>
            </template></el-calendar
          >
        </iot-card>
        <iot-card
          class="today-blk device-blk  overflow-auto"
          title="事件流程"
          :moreType="0"
        >
          <el-timeline
            :reverse="reverse"
            class="mt-20"
            style="width:100% ;"
            v-if="activities.length !== 0"
          >
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :color="index == activities.length - 1 ? '#1b72dc' : ''"
              :size="index == activities.length - 1 ? 'large' : 'normal '"
            >
              <div class="fs-15">{{ activity.eventName }}</div>
              <div class="fs-13 mt-5">{{ activity.time }}</div>
            </el-timeline-item>
          </el-timeline>
          <div v-else class="noData">暂无数据</div>
        </iot-card>
      </div>
      <div class="alarm-info" v-if="hasAlarmMedia" :style="alarminfo_width">
        <alarm-video
          v-if="smokeDeviceMonitorList.length > 0"
          :monitorList="smokeDeviceMonitorList"
        ></alarm-video>
        <iot-card
          class="today-blk device-blk"
          title="报警平面图"
          :moreType="0"
          type="planeGraph"
          @getBigPlaneGraph="getBigPlaneGraph"
        >
          <div
            class="smoke-alarm-plan mt-20"
            :class="{ fixed: isZoomIn }"
            v-if="planeGraphDetail"
          >
            <!-- <div class="fl-bw">
              <div />
              <el-button @click="getBigPlaneGraph" class="mb-10"
                >点击放大</el-button
              >
            </div> -->
            <floorMarker
              :img="planeGraphDetail.path"
              :style="{ height:' 1.4rem '}"
              class="fl-alc"
              :coordList="planeGraphDetail.coordinateData"
              ref="floorMarker"
            ></floorMarker>
          </div>
          <div v-else class="noData">暂无数据</div>
        </iot-card>
      </div>
      <div class="alarm-info" :style="alarminfo_width">
        <iot-card
          class="today-blk device-blk"
          :moreType="0"
          style="height: 100% !important;"
          title="警情处理"
        >
          <el-form
            style="width:100%"
            class="mt-30 fs-16"
            ref="handleForm"
            :model="handleForm"
          >
            <template v-if="!activeAlarm.isHandle">
              <div class="fl-bw mb-20">
                <div
                  class="typeList pointer"
                  v-for="item in alarmType"
                  :key="item.value"
                  :style="handleForm.infoconfirm == item.value ? active : ''"
                  @click="handleTab(item)"
                >
                  {{ item.name }}
                </div>
              </div>
              <div
                class="typeItem mtb-30 pointer"
                @click="handleBatch"
                :style="handleForm.batchHandle ? active : ''"
              >
                批处理该设备警情
              </div>
              <el-form-item
                label="处置人员："
                prop="handlePerson"
                :rules="[
                  {
                    required: true,
                    message: '请输入处置人员',
                    trigger: 'change',
                  },
                ]"
              >
                <el-input
                  placeholder="请输入"
                  v-model.trim="handleForm.handlePerson"
                ></el-input>
              </el-form-item>
              <el-form-item label="备注：">
                <el-input
                  placeholder="请输入"
                  type="textarea"
                  v-model.trim="handleForm.handleRemark"
                  :autosize="{ minRows: 8, maxRows: 10 }"
                ></el-input>
              </el-form-item>
            </template>
            <template v-else>
              <el-form-item label="处置时间：">
                {{ activeAlarm.handletime }}
              </el-form-item>
              <el-form-item label="信息确认：">
                {{
                  activeAlarm.infoconfirm == 1
                    ? "报警"
                    : activeAlarm.infoconfirm == 2
                    ? "误报"
                    : activeAlarm.infoconfirm == 3
                    ? "测试"
                    : ""
                }}
              </el-form-item>
              <el-form-item label="批处理：">
                {{ activeAlarm.batchHandle ? "是" : "否" }}
              </el-form-item>
              <el-form-item label="处置人员：">
                {{ activeAlarm.handlePerson }}
              </el-form-item>
              <el-form-item label="备注：">
                {{ activeAlarm.handleRemark }}
              </el-form-item>
            </template>
          </el-form>

          <!-- <div class="strLimit">{{ textarea1.length }}/200</div> -->
        </iot-card>
      </div>
    </div>
    <div class="mt-20 mb-10 fl-bw">
      <div></div>
      <div>
        <template v-if="!activeAlarm.isHandle">
          <el-button type="cancel" @click="closeAction">取消</el-button>
          <el-button
            type="cancel"
            @click="showMonitor"
            v-if="activeAlarm && activeAlarm.productId == 6002"
            >鹰眼e通</el-button
          >
          <el-button
            type="primary"
            :loading="handling"
            @click="submitHandleAction"
            :disabled="!$store.getters.hasEditPermission"
            >处置</el-button
          >
        </template>
        <el-button type="cancel" @click="closeAction" v-else>确定</el-button>
      </div>
    </div>
    <!-- <div class="flex">
      <div
        :style="{ width: 450 * scale + 'px', marginRight: 30 * scale + 'px' }"
      >
        <Handle
          ref="handle"
          :isAutoClose="autoClose"
          :scale="scale"
          :activeData="activeAlarm"
          :activeDevice="activeDevice"
          @success="handleSuccessAction"
          @fail="handling = false"
          @submitting="handling = true"
          @cancel="closeAction"
          @autoClose="closeAction"
        >
        </Handle>
      </div>
      <div style="width:65%;" v-if="hasAlarmMedia">
        <SmokeAlarmModal
          v-if="hasAlarmMedia"
          :planeGraphDetail="planeGraphDetail"
          :monitorList="smokeDeviceMonitorList"
          ref="smokeAlarmModal"
        ></SmokeAlarmModal>
      </div>
    </div> -->
    <el-dialog
      title="平面图"
      :visible="planeGraphVisible"
      :width="handleModalWidth * scale + 'px'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
      @close="planeGraphVisible = false"
    >
      <floorMarker
        v-if="planeGraphDetail"
        :img="planeGraphDetail.path"
        :style="{ height: '100%' }"
        :coordList="planeGraphDetail.coordinateData"
        ref="floorMarker"
      ></floorMarker>
    </el-dialog>
  </el-dialog>
</template>
<script>
import { mapState } from "vuex";
import Handle from "@/components/HandleAlarm.vue";
import SmokeAlarmModal from "@/components/iot/SmokeAlarmModal";
import iotCard from "@/components/iot/card";
import floorMarker from "@/components/archive/FloorMarker";
import AlarmVideo from "@/components/archive/alarmVideo/index.vue";
import Map from "@/components/iot/postion";

export default {
  name: "AlarmHandle",
  components: {
    Handle,
    SmokeAlarmModal,
    iotCard,
    floorMarker,
    AlarmVideo,
    Map,
  },
  props: {
    visible: {
      type: Boolean,
    },
    activeAlarm: {
      type: Object,
      default() {
        return null;
      },
    },
    activeDevice: {
      type: Object,
      default() {
        return null;
      },
    },
    autoClose: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    ...mapState(["scale", "siteInfos"]),
    handleModalWidth() {
      return this.hasAlarmMedia ? 1800 : 1500;
    },
    hasAlarmMedia() {
      return this.planeGraphDetail || this.smokeDeviceMonitorList.length > 0;
    },
    alarminfo_width() {
      return this.hasAlarmMedia ? "width:24%" : "width:32%";
    },
    planHeight() {
      if (this.isZoomIn) {
        return this.winSize.winH * 0.8;
      } else {
        return 400 * this.scale;
      }
    },
  },
  data() {
    return {
      handling: false,
      smokeDeviceMonitorList: [],
      alarmTimer: null,
      planeGraphDetail: null,
      reverse: true,
      activities: [],
      value: new Date(),
      isZoomIn: false,
      alarmType: [
        {
          name: "报警",
          value: "1",
        },
        {
          name: "误报",
          value: "2",
        },
        {
          name: "测试",
          value: "3",
        },
      ],
      activeIndex: 1,
      active: {
        background: "#1b72dc",
        color: "#fff",
      },
      frieActive: {
        width: "90%",
      },
      textarea1: "",
      typeValue: 1,
      handleForm: {
        infoconfirm: "1",
        id: this.activeAlarm.id,
        deviceClassify: this.activeAlarm.deviceClassify,
        batchHandle: false,
      },
      calendarInfo: {},
      alarmDateList: [],
      dateformat: "",
      alarminfoList: [],
      planeGraphVisible: false,
    };
  },
  created() {
    this.getInfo();
    if (this.activeAlarm.deviceClassify == 3) {
      this.getDeviceMonitor(this.activeDevice.id);
      this.getPlanData(this.activeDevice.storeyId, this.activeDevice.id);
    } else if (
      this.activeAlarm.deviceClassify == 1 ||
      this.activeAlarm.deviceClassify == 22
    ) {
      this.getDeviceMonitor(this.activeDevice.id);
    }
    if (this.autoClose) {
      if (this.alarmTimer) {
        clearTimeout(this.alarmTimer);
      }
      this.alarmTimer = setTimeout(() => {
        this.closeAction();
      }, 10000);
    }
  },
  mounted() {},
  beforeDestroy() {
    clearTimeout(this.alarmTimer);
  },
  methods: {
    getBigPlaneGraph() {
      console.log(1);
      this.planeGraphVisible = true;
    },
    getAlarmEventList() {
      this.$get("/fireFightingIOT/historicalAlarmInfo/eventList", {
        deviceAlarmLogId: this.activeAlarm.id,
      }).then((res) => {
        this.activities = res.data.reverse();
      });
    },
    handleDate(data) {
      this.alarminfoList = this.calendarInfo.items.find(
        (item) => item.dateTime == data
      );
    },
    handleMonthChange() {
      this.$nextTick(() => {
        // 点击前一个月显示前一个月考勤打卡展示
        const prevBtn = document.querySelector(
          ".el-calendar__button-group .el-button-group>button:nth-child(1)"
        );
        prevBtn.addEventListener("click", (e) => {
          console.log("上个月");
          this.getAlarmCalendarList();
        });
        // 点击下一个月
        const nextBtn = document.querySelector(
          ".el-calendar__button-group .el-button-group>button:nth-child(3)"
        );
        nextBtn.addEventListener("click", (e) => {
          console.log("下个月");

          this.getAlarmCalendarList();
        });
        // 点击今天
        const prevBtn2 = document.querySelector(
          ".el-calendar__button-group .el-button-group>button:nth-child(2)"
        );
        prevBtn2.addEventListener("click", () => {
          this.getAlarmCalendarList();
        });
      });
    },
    getalarmDateList(day) {
      return this.alarmDateList.indexOf(day) > -1;
    },
    getInfo() {
      this.getAlarmCalendarList();
      this.getAlarmEventList();
      this.handleMonthChange();
    },
    handleBatch() {
      this.handleForm.batchHandle = !this.handleForm.batchHandle;
    },
    handleTab(item) {
      this.handleForm.infoconfirm = item.value;
    },
    getDate(value) {
      return value
        .split("-")
        .slice(2)
        .join("-");
    },
    closeAction() {
      this.$emit("update:visible", false);
    },
    handleSuccessAction() {
      this.handling = false;
      this.closeAction();
      this.$emit("success");
    },
    submitHandleAction() {
      // this.$refs["handle"].submitAction();
      this.$refs["handleForm"].validate((valid) => {
        if (valid) {
          // this.$emit("submitting");
          let params = Object.assign({}, this.handleForm);
          this.$ajax({
            url: "/fireFightingIOT/historicalAlarmInfo/typeHandle",
            method: "post",
            data: params,
          }).then(
            (data) => {
              this.$message({
                type: "success",
                message: "处置完成",
                center: true,
              });
              this.$emit("success", data);
            },
            (error) => {
              this.$emit("fail");
              if (error.msg) {
                this.$message.error(error.msg);
              }
            }
          );
        } else {
          return false;
        }
      });
    },
    cancelHandle() {
      this.closeAction();
    },
    showMonitor() {
      this.$emit("showMonitor");
    },
    // 获取平面图数据
    getPlanData(floorId, deviceId) {
      this.$get("/business/firefightingplan/storeyDetails", {
        id: floorId,
      }).then((res) => {
        let planeGraphDetail = res.data;
        planeGraphDetail.coordinateData = planeGraphDetail.coordinateData.map(
          (item) => {
            item.isWarn = item.deviceId == floorId;
            return item;
          }
        );
        this.planeGraphDetail = planeGraphDetail;
      });
    },
    getDeviceMonitor(deviceId) {
      this.$get("/fireFightingIOT/device/deviceCameraBindingList", {
        deviceId,
      }).then((res) => {
        this.smokeDeviceMonitorList = res.data;
      });
    },
    getAlarmCalendarList() {
      var year = this.value.getFullYear();
      var month = this.value.getMonth() + 1;
      if (month >= 1 && month <= 9) {
        //月如果小于10就补个0
        month = "0" + month;
      }
      this.$get("/fireFightingIOT/historicalAlarmInfo/alarmCalendarList", {
        date: year + "-" + month,
        number: this.activeDevice.number,
      }).then((res) => {
        this.calendarInfo = res.data;
        this.alarmDateList = res.data.items.map((item) => item.dateTime);
      });
    },
  },
};
</script>
<style>
.el-popper {
  max-height: 2.8rem !important;
  overflow: auto;
  height: auto;
}
</style>
<style lang="less" scoped>
.alarm-info {
  height: 100%;
  .alarm-data {
    width: 100%;
    padding: 0 0.075rem;
    background: #1e3c88;
    border-color: #1e3c88;
    font-size: 0.0875rem;
    color: #fff;
    border-radius: 0.0187rem;
  }
}
/deep/.el-timeline-item__content {
  color: #ffffff !important;
}
/deep/.el-calendar-day {
  height: auto !important;
  padding: 0.0375rem !important;
  text-align: center;
}
/deep/.el-calendar-table td.is-selected {
  color: #0f71e2 !important;
}
/deep/.el-calendar-table td {
  color: #000 !important;
}
/deep/.el-calendar-table:not(.is-range) td.next,
.el-calendar-table:not(.is-range) td.prev {
  color: #c0c4cc !important;
}
/deep/.el-dialog {
  height: 5.2rem !important;
}
/deep/.el-dialog__body {
  height: 94% !important;
  max-height: 94% !important;
  overflow: hidden !important;
}
/deep/.el-calendar__body {
  height: 1.5rem;
}
.typeItem {
  width: 100%;
  height: 0.2188rem;
  text-align: center;
  line-height: 0.2188rem;
  font-size: 0.0875rem;
  background: #fff;
  color: #252525;
  border-radius: 5px;
}
.typeList {
  width: 30%;
  height: 0.2188rem;
  text-align: center;
  line-height: 0.2188rem;
  font-size: 0.0875rem;
  background: #fff;
  color: #252525;
  border-radius: 0.3215rem;
}
/deep/.context {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
/deep/.postion {
  .context {
    height: 90%;
  }
}
/deep/.fs-15 {
  font-size: 0.0938rem !important;
}
.fs-13 {
  font-size: 0.0813rem !important;
}
/deep/.el-calendar__header {
  padding: 0.0313rem 0.0437rem;
}
/deep/.smoke-alarm-plan {
  width: 300px !important;
}
.alarmTime {
  position: absolute;
  left: 0.1875rem;
  bottom: 0.2813rem;
  padding: 0.0625rem;
  background: #fff;
  color: #000;
}
.noData {
  position: absolute;
  top: 50%;
}
</style>
